<template>
  <div class="missionWp">
    <div style="background:rgba(0,0,0,.5)">
      <CD :class="{'r5':r5,'r15':r15}" />
    </div>
    <div @click="showModal">
      <img src="../assets/m2bg.png" style="width:320px;" />
    </div>
    <F :isShow="failed" />
    <div v-show="modal" class="modal" @click="modal=false">
      <img v-if="i==1" src="../assets/m2-01.png" style="width:320px;" />
      <img v-if="i==2" src="../assets/m2-02.png" style="width:320px;" />
      <img v-if="i==3" src="../assets/m2-03.png" style="width:320px;" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      failed: false,
      r5: true,
      r15: false,
      modal: false,
      i: 0
    };
  },
  methods: {
    goNext() {
      this.$su.show();
      this.r15 = false
      setTimeout(() => {
        this.$su.hide();
        this.$router.push("disanguan");
      }, 2000);
    },
    showModal() {
      if (this.i > 2) {
        this.goNext();
        return;
      }
      this.modal = true;
      this.i++;
    },
    start() {
      if (this.r15) {
        this.failed = true;
        return;
      }
      this.r5 = false;
      this.r15 = true;
    }
  },
  mounted() {
    addEventListener("animationend", this.start);
  }
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal img{
  margin-top: -50%;
  position: absolute;
  top: 50%;
}
</style>
